<template>
    <div class="full-layout" v-if="!loading&&!stateVisible" style="position: relative;">
        <div class="header-box">
            <div class="flex-center">
                <div class="flex-center" style="color:#808080" v-if="backupLoading">
                    <span style="margin-right:5px">{{backupInfo}}</span>
                    <el-icon :size="15" class="is-loading" style="margin-top:2px" v-if="backupInfo==='正在备份'"><Loading /></el-icon>
                </div>
                <el-icon :size="20" class="pointer icon" v-else
                title="一键备份" @click="backupAllData">
                    <UploadFilled />
                </el-icon>
                <!-- 灵动岛配置入口 -->
                <el-icon :size="20" class="pointer icon" title="灵动岛配置" @click="islandOptionVisible=true" style="margin-left:10px">
                    <Notification />
                </el-icon>
                <el-popconfirm
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    :icon="InfoFilled"
                    confirm-button-type="primary"
                    icon-color="#e34d59"
                    title="是否退出登录？"
                    @confirm="userStore.loginOut">
                    <template #reference>
                        <el-icon :size="20" class="pointer icon" style="margin-left:10px" title="退出登录"><SwitchButton /></el-icon>
                    </template>
                </el-popconfirm>
                
                <!-- 添加应用入口 -->
                <!-- <el-icon :size="20" class="pointer icon" @click="addAppVisible=true">
                    <Plus />
                </el-icon> -->
            </div>
        </div>
        <div class="desktop-content">
            <div class="desktop-component-box flex-column-center">
                <div class="flex-center full-w" style="flex:1;margin-bottom: 10px;max-height: 180px;">
                    <div class="component-box"
                    style="background-image: linear-gradient(-30deg,#354564 30%,#4c5f7f,#8b9bb8);">
                        <xpTime @open="openWindow"></xpTime>
                    </div>
                    <div class="component-box"
                    style="background-image: linear-gradient(35deg,#354564 30%,#4c5f7f,#8b9bb8);">
                        <xpWeather @open="openWindow"></xpWeather>
                    </div>
                    <div class="component-box"
                    style="background-image: linear-gradient(130deg,#354564 30%,#4c5f7f,#8b9bb8);">
                        <xpCalendar @open="openWindow"></xpCalendar>
                    </div>
                </div>
                <div class="flex-between full-w" style="flex:3;min-height: 200px;">
                    <div class="component-box">
                        <xpNote @open="openWindow"></xpNote>
                    </div>
                    <div class="component-box">
                        <xpTodo @open="openWindow"></xpTodo>
                    </div>
                </div>
            </div>
            <div class="desktop-bottom-nav">
                <div class="flex-center full-layout" style="padding:10px;">
                    <div class="app-icon flex-center app-content" @click="openWindow(defaultApp[0])">
                        <el-tooltip
                        effect="dark"
                        :content="defaultApp[0].name"
                        placement="top">
                            <img :src="defaultApp[0].xIcon" :style="{background:defaultApp[0].background}">
                        </el-tooltip>
                    </div>
                    <el-divider direction="vertical" style="height:2em" />
                    <div class="flex-center app-container" style="width: calc(100% - 140px);justify-content: space-around;">
                        <div 
                        class="app-content flex-center" 
                        v-for="item in appStore.appData" :key="item.id" 
                        @contextmenu.prevent="handleMenu($event, 'appMenuVisible', item)">
                            <template v-if="!item.isFolder">
                                <el-tooltip
                                effect="dark"
                                :content="item.name"
                                placement="top">
                                    <div class="app-icon" @click="openWindow(item)">
                                        <img :src="CheckFullUrl(item.icon)" :style="{backgroundColor:item.background}"/>
                                    </div>
                                </el-tooltip>
                            </template>
                            <template v-else>
                                <el-tooltip
                                effect="dark"
                                :content="item.name"
                                placement="top">
                                    <div class="app-folder app-icon" @click="openFolder(item)">
                                        <img v-for="i in item.children" :key="i.id" :src="CheckFullUrl(i.icon)" :style="{backgroundColor:i.background}"/>
                                    </div>
                                </el-tooltip>
                            </template>
                        </div>
                    </div>
                    <div class="app-icon flex-center app-content" @click="visible=!visible">
                        <el-icon :size="20"><MoreFilled /></el-icon>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="list-box-loading flex-center" v-if="loading">
        <div class="spinner"></div>
    </div>
    <div class="full-h flex-center" v-if="!loading&&stateVisible">
        <el-empty 
        :image="stateImg"
        :description="stateText">
        </el-empty>
    </div>
    <teleport to="body">
        <!-- 灵动岛 -->
        <island v-show="!loading&&!stateVisible"></island>

        <!-- 窗口 -->
        <div class="absolute-full" style="pointer-events:none">
            <div v-for="item in windowList" :key="item.id" style="pointer-events: auto;" v-show="!item.isHide">
                <template v-if="item.type === 'slot'">
                    <slotWindow
                    :dataSource="item"
                    :selected="isSelected"
                    @select="handleSelect"
                    @zoom="handleZoom"
                    @hide="hideWindow"
                    @close="handleClose">
                        <component :is="item.component" :modelData="item.data || null"></component>
                    </slotWindow>
                </template>
                <template v-else>
                    <iframeWindow
                    :dataSource='item'
                    :selected='isSelected'
                    :loading="iframeloading"
                    @select='handleSelect'
                    @zoom='handleZoom'
                    @load="iframeLoad"
                    @hide="hideWindow"
                    @close='handleClose'>
                    </iframeWindow>
                </template>
            </div>

        </div>

        <!-- 所有应用弹窗 -->
        <appDialog 
        :visible="visible"
        @menu="handleMenu"
        @open="openWindow"
        @close="closeAppDialog">
        </appDialog>

        <!-- 应用文件夹 -->
        <transition name="xpDialog">
            <appFolder
            v-if="folderVisible"
            :visible="folderVisible"
            :folderData="folderData"
            @menu="handleMenu"
            @open="openWindow"
            :type="1"
            @close="folderVisible=false">
            </appFolder>
        </transition>

         <!-- 右键菜单 -->
         <ul v-if="menuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
            <li class="flex-between" @click="createFolder">
                <span>新建文件夹</span>
                <el-icon><Folder /></el-icon>
            </li>
            <li class="flex-between" @click="appStore.backupAppData()">
                <span>立即备份</span>
                <el-icon><Cloudy /></el-icon>
            </li>
        </ul>

        <!-- 应用右键菜单 -->
        <appMenu
        v-if="appMenuVisible"
        :visible="appMenuVisible"
        :left="left"
        :top="top"
        :contextData="contextAppData">
        </appMenu>

        <!-- 添加应用弹窗 -->
        <addApp v-if="addAppVisible" :visible="addAppVisible" @close="addAppVisible=false"></addApp>
        <!-- 应用后台侧边栏 -->
        <appBack :dataSource="windowList" @show="showWindow" @menu="handleMenu"></appBack>
        <!-- 灵动岛配置弹窗 -->
        <islandOption :visible="islandOptionVisible" @close="islandOptionVisible=false"></islandOption>
    </teleport>
</template>

<script lang="ts" src='./index.ts' >
</script>

<style scoped lang="scss" src="./index.scss">
</style>